@charset "UTF-8";

/*doc
---
title: Group
name: a-group
category: Components - Button Groups
---

```html_example
<div class="btn-group">
  <button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-align-left"></i></button>
  <button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-align-center"></i></button>
  <button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-align-right"></i></button>
</div>
```

## Vertical group

```html_example
<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-home"></i></button>
  <button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-user"></i></button>
  <button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-comment"></i></button>
  <button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-cog"></i></button>
</div>
```

## Justified group
```html_example
<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary"><i class="glyphicon glyphicon-align-left"></i></a>
  <a href="#" class="btn btn-primary"><i class="glyphicon glyphicon-align-center"></i></a>
  <a href="#" class="btn btn-primary"><i class="glyphicon glyphicon-align-right"></i></a>
</div>
```

*/



/*doc
---
title: Sizes
name: b-sizes
category: Components - Button Groups
---

```html_example
<!-- Horizontal group -->
<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-align-left"></i></button>
  <button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-align-center"></i></button>
  <button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-align-right"></i></button>
</div>

<br><br>

<div class="btn-group">
  <button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-align-left"></i></button>
  <button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-align-center"></i></button>
  <button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-align-right"></i></button>
</div>

<br><br>

<div class="btn-group btn-group-sm">
  <button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-align-left"></i></button>
  <button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-align-center"></i></button>
  <button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-align-right"></i></button>
</div>

<br><br>

<div class="btn-group btn-group-xs">
  <button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-align-left"></i></button>
  <button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-align-center"></i></button>
  <button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-align-right"></i></button>
</div>
```
*/


/*doc
---
title: With dropdown
name: c-with-dropdown
category: Components - Button Groups
---

```html_example
<div class="btn-group">
  <button type="button" class="btn btn-primary">1</button>
  <button type="button" class="btn btn-primary">2</button>

  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>
```
*/


